<!--<template>-->

<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  name: "editRoleBtn"-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->

<!--</style>-->
<template>
  <div style="display: inline-block;margin-right: 12px">
    <el-button  type="primary" size="small" @click="goEdit">编辑</el-button>
    <el-drawer
        title="编辑角色"
        size="450px"
        :destroy-on-close="false"
        :visible.sync="dialogVisible">
      <roleForm ref="roleForm"></roleForm>
      <div class="btnBox flex-center">
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-drawer>
    <!--    <el-dialog-->
    <!--        title="新增角色"-->
    <!--        :visible.sync="dialogVisible"-->
    <!--        width="500px">-->
    <!--      <roleForm ref="roleForm"></roleForm>-->
    <!--      <span slot="footer" class="dialog-footer">-->
    <!--        <el-button @click="dialogVisible = false">取 消</el-button>-->
    <!--        <el-button type="primary" @click="submit">确 定</el-button>-->
    <!--      </span>-->
    <!--    </el-dialog>-->
  </div>
</template>

<script>
import roleForm from "@/views/systemManage/role/module/roleForm";
export default {
  name: "editRoleBtn",
  props:{
    params:{
      default:()=>{}
    }
  },
  components:{
    roleForm
  },
  methods:{
    goEdit(){
      this.dialogVisible = true
      this.$nextTick(()=>{
        this.$refs.roleForm.form = {...this.$refs.roleForm.form,...this.params}
      })
    },
    submit() {
      this.$refs.roleForm.validate().then(res=>{
        let params = {
          ...this.$refs.roleForm.form
        }
        this.$api.editRoles(params).then(res=>{
          this.$message.success('编辑成功')
          this.$emit('after-op')
          this.dialogVisible = false
        })
      })
    },
  },
  data(){
    return {
      dialogVisible:false
    }
  },
}
</script>

<style scoped>

</style>